<?php include('include/head.php');?>
<body>
	<!-- 头部导航 -->
	<?php include('include/header.php');?>
	<section class="main">
		<div class="content">
			<div class="home-banner">
				<div class="banner-img">
					<ul class="swiper-wrapper">
						<li class="swiper-slide">
							<a href="/dome/movie/movie/?337339">
								<img class="hidden-xs" src="images/homebanner/home_banner_01.jpg" alt="">
								<img class="visible-xs-block" src="images/homebanner/home_banner_01_m.jpg" alt="">
							</a>
						</li>
						<li class="swiper-slide">
							<a href="/dome/movie/movie/?293167">
								<img class="hidden-xs" src="images/homebanner/home_banner_02.jpg" alt="">
								<img class="visible-xs-block" src="images/homebanner/home_banner_02_m.jpg" alt="">
							</a>
						</li>
						<li class="swiper-slide"><img class="hidden-xs" src="images/home_banner_pc_2.jpg" alt=""><img class="visible-xs-block" src="images/home_banner_m_2.jpg" alt=""></li>
						<li class="swiper-slide"><img class="hidden-xs" src="images/home_banner_pc_3.jpg" alt=""><img class="visible-xs-block" src="images/home_banner_m_3.jpg" alt=""></li>
						<li class="swiper-slide"><img class="hidden-xs" src="images/home_banner_pc_4.jpg" alt=""><img class="visible-xs-block" src="images/home_banner_m_4.jpg" alt=""></li>
					</ul>
				</div>
				<!-- <div class="swiper-button-next swiper-button-white"></div> -->
        		<!-- <div class="swiper-button-prev swiper-button-white"></div> -->
				<script>
			    var swiper = new Swiper('.banner-img',{
			    	//nextButton: '.swiper-button-next',
        			//prevButton: '.swiper-button-prev',
        			effect : 'fade',
        			speed:3000,
			    	grabCursor: true,
			    	loop: true,
			    	autoplay : 5000,
			    });
			    </script>
			</div>
			<div class="container home-b-top">
				<div class="movies-list-wrap mlw-topview">
					<div class="slideTxtBox shareBox">
						<div class="hd ml-title">
							<span class="pull-left">Suggestion <i class="iconfont icon-right"></i></span>
							<ul class="ml-nav">
								<li data-url="/movie/popular" data-id="popular"><a class="active popular" href="javascript:;">Popular</a></li>
								<li data-url="/movie/top_rated" data-id="top-rated"><a class="top-rated" href="javascript:;">Top Rated</a></li>
								<li data-url="/movie/upcoming" data-id="upcoming"><a class="upcoming" href="javascript:;">Upcoming</a></li>
								<li data-url="/movie/now_playing" data-id="now-playing"><a class="now-playing" href="javascript:;">Now Playing</a></li>
							</ul>
						</div>
						<div class="bd movies-list-container">	
							<ul id="popular" class="ml-list"></ul>
							<ul id="top-rated" class="ml-list"></ul>
							<ul id="upcoming" class="ml-list"></ul>
							<ul id="now-playing" class="ml-list"></ul>
						</div>
						<script id="movie-list" type="text/html">
						    <%for(var i=0; i<results.length; i++){%>
					         <li class="ml-item" data-movie-id="<%=results[i].id%>">
								<span class="mli-quality">HD</span><a class="ml-mask jt" data-movie-id="<%=results[i].id%>" title="<%=results[i].title%>" href="/dome/movie/movie?<%=results[i].id%>" target="_blank"><img class="lazy" data-original="https://image.tmdb.org/t/p/w185_and_h278_bestv2/<%=results[i].poster_path%>" src="/dome/movie/images/loading.gif" alt=""></a>
							</li>
							<%if (i==15){break};%>
							<%}%>
						</script>
					</div>
				</div>
				<div class="movies-list-wrap mlw-latestmovie">
					<div class="hd ml-title">
						<span class="pull-left">Latest Movies <i class="iconfont icon-right"></i></span>
					</div>
					<div class="bd movies-list-container">	
						<ul id="latest-movies" class="ml-list"></ul>
					</div>
					
				</div>
				<div class="movies-list-wrap mlw-featured">
					<div class="hd ml-title">
						<span class="pull-left">Latest TV-Series <i class="iconfont icon-right"></i></span>
					</div>
					<div class="bd movies-list-container">	
						<ul id="latest-tv" class="ml-list"></ul>
					</div>
					<script id="tv-list" type="text/html">
					    <%for(var i=0; i<results.length; i++){%>
				         <li class="ml-item" data-tv-id="<%=results[i].id%>">
							<span class="mli-quality">HD</span><a class="ml-mask jt-tv" data-tv-id="<%=results[i].id%>" title="<%=results[i].name%>" href="/dome/movie/tv-detail?<%=results[i].id%>" target="_blank"><img class="lazy" data-original="https://image.tmdb.org/t/p/w185_and_h278_bestv2/<%=results[i].poster_path%>" src="/dome/movie/images/loading.gif" alt=""></a>
						</li>
						<%if (i==15){break};%>
						<%}%>
					</script>
				</div>
				<div class="movies-list-wrap mlw-requested">
					<div class="hd ml-title">
						<span class="pull-left">Comic <i class="iconfont icon-right"></i></span>
					</div>
					<div class="bd movies-list-container">	
						<ul id="latest-comic" class="ml-list"></ul>
					</div>
				</div>
			</div>
		</div>
	</section>
	<?php include('include/footer.php'); ?>
	<script type="text/javascript">
		$(function(){
			$(".ml-nav li").each(function(i) {
				var url    = $(this).attr("data-url");
				var dataId = $(this).attr("data-id")
				$getMoviesList(url,dataId);
			});
			$getLatestMoviesList("/discover/movie","latest-movies");
			$getLatestComicList("/discover/movie","latest-comic");
			$getLatestTvList("/discover/tv","latest-tv");
			
			jQuery(".slideTxtBox").slide({trigger:"click",pnLoop:false,startFun:function(i,c){
			        $("img.lazy").lazyload({effect : "fadeIn"});
			    }
			});
			$("img.lazy").lazyload({effect : "fadeIn"});
		});	
	</script>
</body>
</html>